<template>
  <el-dialog title="更改所属企业" :visible.sync="show" width="40%">
    <el-form ref="form" :model="query" label-width="60px">
      <el-form-item prop="id" label="企业">
        <el-select
          v-model="query.id"
          placeholder="请选择企业"
          filterable
          style="width: 100%"
        >
          <el-option
            v-for="item in companyList"
            :key="item.value"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="shuo">
      <i class="el-icon-info"></i>
      <div class="explain">
        <p>更改所属企业后，将造成如下影响，请先确认后谨慎操作</p>
        <p>1.原有商户授权渠道将会清空，商品需重新授权商户渠道</p>
        <p>2.原有授权云仓市场渠道将会清空，商品需重新授权云仓市场</p>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="submit">
        确 定
      </el-button>
    </span>
  </el-dialog>
</template>

<script>

export default {
  data() {
    return {
      query: {
        id: null
      },
      show: false,
      loading: false,
      companyList: [],
      mchId: null
    }
  },
  watch: {},
  methods: {
    open(data) {
      console.log('data===>', data)
      this.query.id = data.companyId
      this.mchId = data.merchantId
      this.show = true
      this.getCompany({ id: data.companyId, name: data.companyName })
    },
    getCompany(item) {
      this.companyList = []
      this.$POST('/sot-admin-api/merchant/merchant/queryCompanyList').then(
        (data) => {
          this.companyList = data
          if (item) {
            this.companyList.push(item)
          }
        }
      )
    },
    submit() {
      let datas = { companyId: this.query.id, mchId: this.mchId }
      this.loading = true

      this.$POST('/sot-admin-api/merchant/merchant/changeCompany', datas)
        .then((res) => {
          this.show = false
          this.loading = false
          this.$emit('refresh')
        })
        .catch((err) => {
          this.loading = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.shuo {
  display: flex;
  justify-content: flex-start;
  margin-left: 25px;
}

.el-icon-info {
  padding-top: 10px;
  padding-right: 10px;
  color: #e6a23c;
  font-size: 20px;
}
.explain {
  color: #409eff;
}
</style>